<template>
	<div class="main">
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/knowledge/1.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/knowledge/2.png">
				</div>
			</div>
			<div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/knowledge/4.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/3.png">
						</div>
						<div>校园法治</div>
					</div>
				</div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/knowledge/5.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/3.png">
						</div>
						<div>电影法治</div>
					</div>
				</div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/knowledge/6.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/3.png">
						</div>
						<div>热门民生</div>
					</div>
				</div>
			</div>
			<div>
				<a href="https://news.cctv.com/law/">
					<div>
						<img src="@/assets/images/wechat/student/knowledge/bg.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/11.png">
						</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/top.png">
						</div>
						<div>法制新闻</div>
					</div>
				</a>
				<a href="http://alk.12348.gov.cn/">
					<div>
						<img src="@/assets/images/wechat/student/knowledge/bg.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/10.png">
						</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/top.png">
						</div>
						<div>案例篇</div>
					</div>
				</a>
				<a href="http://www.gov.cn/flfg/fl.htm">
					<div>
						<img src="@/assets/images/wechat/student/knowledge/bg.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/9.png">
						</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/top.png">
						</div>
						<div>法律法规</div>
					</div>
				</a>
				<a href="http://legalinfo.moj.gov.cn/pub/sfbzhfx/zhfxzxxf/zxxfwdh/">
					<div>
						<img src="@/assets/images/wechat/student/knowledge/bg.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/8.png">
						</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/top.png">
						</div>
						<div>法律常识</div>
					</div>
				</a>
				<a href="">
					<div>
						<img src="@/assets/images/wechat/student/knowledge/bg.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/7.png">
						</div>
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/knowledge/top.png">
						</div>
						<div>普法动漫</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #670914;
		>div:nth-child(1){
			overflow: hidden;
			margin-top:34px;
			margin-left:16px;
			margin-right:16px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					width: 100%;
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					width: 100%;
					position: absolute;
					top:0;
					left:0;
					>img{
						width:100%;
					}
				}
			}
			>div:nth-child(2){
				margin-top:8px;
				display:flex;
				justify-content: space-between;
				>div{
					width:30%;
					>div:nth-child(1){
						height:80px;
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						position: relative;
						margin-left:4px;
						margin-right:4px;
						>div:nth-child(1){
							img{
								width:100%;
							}
						}
						>div:nth-child(2){
							position: absolute;
							top:0;
							left:0;
							right:0;
							text-align: center;
							font-size: 9px;
							font-weight: normal;
							color: #483221;
							line-height: 20px;
						}
					}
				}
			}
			>div:nth-child(3){
				overflow: hidden;
				margin-top:7px;
				margin-bottom:40px;
				>a{
					display: block;
					position: relative;
					margin-top:20px;
					>div:nth-child(1){
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						position: absolute;
						left:10px;
						right:10px;
						top:10px;
						>div{
							width:100%;
							>img{
								width:100%;
							}
						}
					}
					>div:nth-child(3){
						position: absolute;
						top:0px;
						left:0;
						right:0;
						>div:nth-child(1){
							>img{
								margin:auto;
							}
						}
						>div:nth-child(2){
							position: absolute;
							left:0px;;
							top:0px;
							right:0;
							text-align: center;
							line-height: 22px;
							font-size: 17px;
							font-weight: 400;
							color: #773600;
						}
					}
				}
			}
		}	
	}
</style>
